import React, { useState, memo } from 'react';
import { Row, Col, Form, Select, Modal, message, Input } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import EmptyCenter from '@/components/EmptyCenter';
import useModel from '../../useModel.js';
import { useUpdateEffect, useUnmount } from '@umijs/hooks';
import Connect from '@/components/Connect';
const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
const CustomizedForm = ({ isAdd, data, fields, clear, form }) => {
  useUnmount(() => {
    clear();
  });
  return (
    <Form fields={fields} form={form}>
      <Form.Item
        name="name"
        {...layout}
        label="平台名称"
        rules={[
          {
            required: false,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入设备类型名称'} />
      </Form.Item>
      <Form.Item
        name="mask"
        {...layout}
        label="子掩码"
        rules={[
          {
            required: false,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入设备类型名称'} />
      </Form.Item>
      <Form.Item
        name="scIp"
        {...layout}
        label="scIp"
        rules={[
          {
            required: false,
            message: '必须填写内容!',
          },
          /*{
                         pattern: /^((1\d\d|2[0-4]\d|25[0-5]|\d{1,2})\.){3}(1\d\d|2[0-4]\d|25[0-5]|\d{1,2})$/,
                         message: '请填写正确的IP!',
                       },*/
        ]}
      >
        <Input placeholder={'请输入IP信息'} />
      </Form.Item>
      {isAdd && (
        <Form.Item
          name="copyId"
          {...layout}
          label="选择基于平台"
          rules={[
            {
              required: false,
              message: '必须填写内容!',
            },
          ]}
        >
          <Select allowClear placeholder={'请输入需要基于的平台'}>
            {data.map((item, index) => {
              return (
                <Option key={index.toString(36) + index} value={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      )}
    </Form>
  );
};
export default memo(props => {
  const {
    state: { addProps, visible, data, isAdd, fsuTypeItem, fields, updateProps },
    setState,
  } = useModel(model => [
    model.state.addProps,
    model.state.visible,
    model.state.isAdd,
    model.state.fsuTypeItem,
    model.state.fields,
    model.state.updateProps,
  ]);
  const [form] = Form.useForm();

  const showModal = () => {
    setState({
      visible: true,
    });
  };

  const handleOk = async e => {
    const fields = form.getFieldsValue();
    if (isAdd) {
      addProps.run({ ...fields });
    } else {
      const params = { ...fields, id: fsuTypeItem.id };
      updateProps.run(params);
    }
    setState({
      visible: false,
    });
  };

  const handleCancel = e => {
    setState({
      visible: false,
    });
  };
  const clear = () => {
    setState({
      fields: [
        {
          name: ['name'],
          value: '',
        },
        {
          name: ['mask'],
          value: '',
        },
        {
          name: ['scIp'],
          value: '',
        },
        {
          name: ['copeId'],
          value: '',
        },
      ],
    });
  };

  return (
    <Modal
      className={styles['modal-wrap']}
      title={props.title || '修改设备类型名称'}
      width={600}
      visible={visible}
      onOk={handleOk}
      okText={'确认'}
      onCancel={'取消'}
      destroyOnClose={true}
      onCancel={handleCancel}
    >
      <div className={styles['form-wrap']}>
        <CustomizedForm isAdd={props.isAdd} data={data} fields={fields} form={form} clear={clear} />
      </div>
    </Modal>
  );
});
